<template>
  <div>
    <div class="appBox">
      <div class="tabaleBox">

        <el-table border
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop="province"
                           label="省份名称"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="registerUser"
                           label="注册人员数量"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="workUser"
                           label="在职人员数量"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="countDate"
                           label="统计日期"
                           show-overflow-tooltip
                           align="center" />
        </el-table>
      </div>

      <div id="maychar">
      </div>
    </div>

  </div>
</template>
 
<script>
export default {
  data () {
    return {
      loading: false,
      tableData: [],
      option: {
        backgroundColor: '#23243a',
        tooltip: { //提示框组件
          trigger: 'axis',
          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          textStyle: {
            color: '#000',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1]
          },
          {
            type: 'inside',
            realtime: true, //鼠标滚轮
            start: 50,
            end: 50,
            xAxisIndex: [0, 1]
          }
        ],
        grid: {
          left: '1.5%',
          right: '2%',
          bottom: '10%',
          top: 30,
          padding: '0 0 10 0',
          containLabel: true,
        },
        legend: {//图例组件，颜色和名字
          right: 10,
          top: 0,
          itemGap: 16,
          itemWidth: 18,
          itemHeight: 10,
          data: [{
            name: '注册人数',
            //icon:'image://../wwwroot/js/url2.png', //路径
          },
          {
            name: '就职人数',
          }],
          textStyle: {
            color: '#a8aab0',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,//坐标轴两边留白
            data: [],
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
              margin: 15,
              textStyle: {
                color: '#078ceb',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              }
            },
            axisTick: {//坐标轴刻度相关设置。
              show: false,
            },
            axisLine: {//坐标轴轴线相关设置
              lineStyle: {
                color: '#fff',
                opacity: 0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: false,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity: 0.06
              }
            }

          }
        ],
        series: [
          {
            name: '注册人数',
            type: 'bar',
            data: [],
            barWidth: 40,
            barGap: 0,//柱间距离
            label: {//图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
              },
            },
            itemStyle: {//图形样式
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, color: 'rgba(127, 128, 225, 0.7)'
                }, {
                  offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
                }, {
                  offset: 0.31, color: 'rgba(0, 208, 208, 0.7)'
                }, {
                  offset: 0.15, color: 'rgba(0, 208, 208, 0.7)'
                }, {
                  offset: 0, color: 'rgba(104, 253, 255, 0.7)'
                }], false),
              },
            },
          },
          {
            name: '就职人数',
            type: 'bar',
            data: [],
            barWidth: 40,
            barGap: 0.2,//柱间距离
            label: {//图形上的文本标签
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
              },
            },
            itemStyle: {//图形样式
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, color: 'rgba(127, 128, 225, 0.7)'
                }, {
                  offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
                }, {
                  offset: 0.25, color: 'rgba(226, 99, 74, 0.7)'
                }, {
                  offset: 0, color: 'rgba(253, 200, 106, 0.7)'
                }], false),
              },
            },
          }
        ]
      }
    };
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {

      this.$get('/userInfo/getProvinceUserList').then(res => {
        console.log(res);
        if (res.code == 200) {
          this.option.xAxis[0].data = res.data.map(a => a.province)
          this.option.series[0].data = res.data.map(a => a.registerUser)
          this.option.series[1].data = res.data.map(a => a.workUser)
          if (res.data && res.data.length - 0 > 5) {
            let endNum = 100 / res.data.length * 5
            this.option.dataZoom[0].end = Number(endNum.toFixed(2))
          }
          this.tableData = res.data
          this.getCharts();

        }
      })
    },
    // 使用柱形图，关于其他配置可以去官网查看
    getCharts () {
      const chartBox = this.$echarts.init(document.getElementById("maychar"));
      chartBox.setOption(this.option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        this.setTimeout(() => {
          chartBox.resize();
        }, 200)
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tabaleBox {
  overflow: hidden;
  flex: 1;
}
#maychar {
  width: calc(100% - 0px);
  margin-top: 20px;
  height: 66%;
}
</style>